
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">

<title>管理员页面</title>
<!--1. Bootstrap core CSS -->
<link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet">
<!-- 引入layui.js文件 -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" media="all">
<!--2. Custom styles for this template -->
<link href="${pageContext.request.contextPath}/css/dashboard.css" rel="stylesheet">

</head>
<body>
	<jsp:include page="nav.jsp"></jsp:include>
	<div class="container-fluid">
		<div class="row">
			<div class="col-sm-3 col-md-2 sidebar">
				<ul class="nav nav-sidebar">
					<li><a href="adminuser.jsp">用户管理 </a></li>
					<li class="active"><a href="adminstore.jsp">商家管理<span
							class="sr-only">(current)</span></a></li>
				</ul>
			</div>
			<h2 class="sub-header">
				<form class="navbar-form navbar-right"
					action="StoreServlet?op=selectByPage" method="post">
					<input type="text" class="form-control" name="keywords"
						id="keywords" placeholder="关键字" value="${keywords}"> <input
						type="submit" class="btn btn-primary" value="查询">
				</form>
			</h2>
			<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

				<div class="table-responsive">
					<table class="table table-striped">
						<thead>
							<tr>
								<th>商家编号</th>
								<th>商店名</th>
								<th>商家姓名</th>
								<th>商家电话</th>
								<th>商家地址</th>
								<th>商家介绍</th>
								<th>商家余额</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<!-- 如果属性范围内的pd为null，我们就跳转到StoreServlet去获取数据，然后再转发回来 -->
							<c:if test="${pd==null}">
								<!-- c:redirect 跳转到 StoreServlet -->
								<c:redirect url="StoreServlet?op=selectByPage"></c:redirect>
							</c:if>
							<!-- 如果 范围内的pd不为空，遍历数据并展示结果 -->
							<c:if test="${pd!=null}">
								<c:forEach items="${pd.data}" var="stores">
									<tr>
										<td>${stores.storeid}</td>
										<td>${stores.store}</td>
										<td>${stores.storename}</td>
										<td>${stores.storecall}</td>
										<td>${stores.address}</td>
										<td>${stores.storeinfo}</td>
										<td>${stores.money}</td>
										<td><a class="updatestore" href="#">修改</a> | <a
											class="delstore" href="#">删除</a></td>
									</tr>
								</c:forEach>
							</c:if>
						</tbody>
					</table>
				</div>

				<!-- 显示 分页导航区域 -->
				<div id="pagediv" style="text-align: center;"></div>

			</div>
		</div>
	</div>
    <script src="layui/layui.js" charset="utf-8"></script>
	<!-- Bootstrap core JavaScript
    ================================================== -->
	<!--3 - js/jquery-2.0.3.js -->
	<script src="${pageContext.request.contextPath}/js/jquery-2.0.3.js"></script>
	<!--4 - ootstrap.min.js -->
	<script src="js/bootstrap.min.js"></script>
	<!-- 引入layui.js文件 -->
	
	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

	<script>
      layui.use(['laypage', 'layer'], function(){
       var laypage = layui.laypage
      ,layer = layui.layer;
       
       
     //完整功能
       laypage.render({
         elem: 'pagediv'
         ,count:${pd.totalCount}
         ,curr:${pd.page}

         , limit:${pd.pageSize}
         ,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
         ,jump: function(obj,first){
        	    //obj包含了当前分页的所有参数，比如：
        	    console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
        	    console.log(obj.limit); //得到每页显示的条数
        	    
        	    //首次不执行
        	    if(!first){
        	     //do something
        	    location.href="StoreServlet?op=selectByPage&page="+obj.curr+"&pageSize="+obj.limit+"&keywords="+$("#keywords").val();
        	    } 
        	  }
         
       });
     

      });
      
      //给删除超链接设置了类class,作用希望我们可以定位a标签，同时完成其单击事件
      $(".delstore").click(function(){
    	  //单击事件的代码	  
    	  //0得到这行 的第一个td中的typeid的值,我们使用js(jq)的一些方法来操作页面元素
    	  //$(this).parents("tr") 当前行
    	  //find("td") 这个tr下的所有td
    	  //eq(0) 所有td中的第一个
    	  //text() ->innerText td中的文本内容
    	  var storeid = $(this).parents("tr").find("td").eq(0).text();
    	  //1 提 示用户是否删除?打算使用layui的layer组件弹窗提示
    	//询问框
    	  layer.confirm('是否确定删除编号为'+storeid+"的类型", {
    	    btn: ['确定','取消'] //按钮
    	  }, function(){
    	    //layer.msg('确定的时候要执行的代码', {icon: 1});
    	    //真的删除
    	    //1 url传值，页面条状  2 ajax请求
    	    $.ajax({
    	    	//参数
    	    	url:"StoreServlet",
    	    	type: "post",
    	    	data:{
    	    		storeid:storeid,
    	    		op: "delete"
    	    	},
    	    	success: function(res){
    	    		//判断返回值的结果，根据结果做提示以及后续的页面刷新操作
    	    		if(res.msg == "true")
    	    			{
    	    			
    	    			layer.msg('删除成功!', {
    	    				icon: 1,
    	    			    time: 2000, //2s后自动关闭
    	    			    btn: ['确定']
    	    			  },function(){
    	    				  
    	    				  //页面刷新
    	    				  location.href="StoreServlet?op=selectByPage&page="+${pd.page}+"&pageSize="+${pd.pageSize}+"&keywords="+$("#keywords").val();	    				  
    	    			  });	    					    			
    	    			}
    	    		else{
    	    			
    	    			layer.msg('删除失败!', {
    	    				icon: 1,
    	    			    time: 2000, //2s后自动关闭
    	    			    btn: ['确定']
    	    			  });
    	    			
    	    		}
    	    		
    	    	},
    	    	dataType: "json"
    	    	
    	    	
    	    });
    	  });		  
    			  
    			  
    	  
    	  
      });
      /**********删除结束********/
      /**********修改开始********/
       $(".updatestore").click(function(){  
	  //得到类型的
	  var storeid=$(this).parents("tr").find("td").eq(0).text();
	  var store=$(this).parents("tr").find("td").eq(1).text();
	  var storename=$(this).parents("tr").find("td").eq(2).text();
	  var storecall=$(this).parents("tr").find("td").eq(3).text();
	  var address=$(this).parents("tr").find("td").eq(4).text();
	  var storeinfo=$(this).parents("tr").find("td").eq(5).text();
	  var money=$(this).parents("tr").find("td").eq(6).text();
	  $("#storeid").val(storeid);
	  $("#store").val(store);
	  $("#storename").val(storename);  
	  $("#storecall").val(storecall);
	  $("#address").val(address);
	  $("#storeinfo").val(storeinfo);
	  $("#money").val(money);
	  
	  
	  
	
	//弹出层
	  layer.open({
		  type: 1,
		  area: ['600px', '400px'],
		  content: $('#updatediv') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
		});
	  
	  
   });
  
  
  
 
  
  
  /*********修改结束*******/

   </script>
   <div id="updatediv" style="display:none;width:500px">
  <br>
   <form class="layui-form" action="">
   
  <div class="layui-form-item"> 
    <label class="layui-form-label">商家编号</label>
    <div class="layui-input-block">
      <input type="text" name="storeid" id="storeid" required  lay-verify="required" readonly  class="layui-input">
    </div>
  </div>
 
 <div class="layui-form-item">
    <label class="layui-form-label">商店名称</label>
    <div class="layui-input-block">
      <input type="text" name="store" id="store" required  lay-verify="required"   class="layui-input">
    </div>
  </div>
  
 <div class="layui-form-item">
    <label class="layui-form-label">店家名称</label>
    <div class="layui-input-block">
       <input type="text" name="storename" id="storename" required  lay-verify="required"   class="layui-input">
    </div>
  </div>
   <div class="layui-form-item">
    <label class="layui-form-label">商家电话</label>
    <div class="layui-input-block">
      <input type="text" name="storecall" id="storecall" required  lay-verify="required"   class="layui-input">
    </div>
  </div>
    <div class="layui-form-item">
    <label class="layui-form-label">商家地址</label>
    <div class="layui-input-block">
      <input type="text" name="address" id="address" required  lay-verify="required"    class="layui-input">
    </div>
  </div>
   <div class="layui-form-item">
    <label class="layui-form-label">商家信息</label>
    <div class="layui-input-block">
      <input type="text" name="storeinfo" id="storeinfo" required  lay-verify="required"   class="layui-input">
    </div>
   </div>
   <div class="layui-form-item">
    <label class="layui-form-label">商家余额</label>
    <div class="layui-input-block">
      <input type="text" name="money" id="money" required  lay-verify="required"  readonly class="layui-input">
    </div>
   </div>
  
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
 
<script>
//Demo
layui.use('form', function(){
  var form = layui.form;
  
  //监听提交
  form.on('submit(formDemo)', function(data){
	  layer.msg(JSON.stringify(data.field),{
  	    btn: ['确定','取消'] //按钮
  	  }, function(){
  	    
  	    $.ajax({
  	    	//参数
  	    	url: "StoreServlet",
  	    	type: "post",
  	    	data:{
  	    		storeid:$("#storeid").val(),
  	    		store:$("#store").val(),
  	    		storename:$("#storename").val(),	
  	    		storecall:$("#storecall").val(),
  	    		address:$("#address").val(),
  	    		storeinfo:$("#storeinfo").val(),
  	    		money:$("#money").val(),
  	    		op: "update"
  	    	},
  	    	success: function(res){
  	    		//判断返回值的结果，根据结果做提示以及后续的页面刷新操作
  	    		if(res.msg == "true")
  	    			{
  	    			
  	    			layer.msg('修改成功!', {
  	    				icon: 1,
  	    			    time: 2000, //2s后自动关闭
  	    			    btn: ['确定']
  	    			  },function(){
  	    				  
  	    				  //页面刷新
  	    				  location.href="StoreServlet?op=selectByPage&page="+${pd.page}+"&pageSize="+${pd.pageSize}+"&keywords="+$("#keywords").val();	    				  
  	    			  });	    					    			
  	    			}
  	    		else{
  	    			
  	    			layer.msg('修改失败!', {
  	    				icon: 1,
  	    			    time: 2000, //2s后自动关闭
  	    			    btn: ['确定']
  	    			  });
  	    			
  	    		}
  	    		
  	    	},
  	    	dataType: "json"
  	    	    	
  	    });
  	  });	    
	  
    
	  return false;
  });
});      
 </script>
</body>
</html>